<template>
	<view class="run">
		<view class="run_consumables">
			<view class="run_consumables_item" v-for="index in 12" :key="index">
				<view class="run_consumables_item_box">
					<view class="progres"></view>
				</view>
				<view class="run_consumables_item_index">
					{{index}}
				</view>
			</view>
		</view>


		<view class="run_info">
			<view class="run_info_item">
				<view class="run_info_item_label">
					{{$t('plugin.devices.run.name.cartridgeModel')}}
				</view>
				<view class="run_info_item_content">
					ACCC
				</view>
			</view>
			<view class="run_info_item">
				<view class="run_info_item_label">
					{{$t('plugin.devices.run.name.expiryDate')}}
				</view>
				<view class="run_info_item_content">
					2025/10/30
				</view>
			</view>
			<view class="run_info_item">
				<view class="run_info_item_label">
					{{$t('plugin.devices.run.name.targetLocation')}}
				</view>
				<view class="run_info_item_content">
					Ac
				</view>
			</view>
			<view class="run_info_item">
				<view class="run_info_item_label">
					{{$t('plugin.devices.run.name.remainingCapsules')}}
				</view>
				<view class="run_info_item_content">
					5{{$t('plugin.devices.run.text.a')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.run {
		display: grid;
		grid-template-columns: 1fr 220px;
		gap: 10px;
		margin: 6px 0;

		&_consumables {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 15px;

			&_item {
				&_index {
					text-align: center;
					margin-top: 5px;
				}

				&_box {
					position: relative;
					width: 100%;
					height: 150px;
					background: var(--bg);
					border-radius: 20px;
					overflow: hidden;
				}

				.progres {
					position: absolute;
					bottom: 0;
					left: 0;
					background: var(--color);
					width: 100%;
					height: 100%;
				}
			}
		}

		&_info {
			&_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;

				&:last-child {
					margin-bottom: 0;
				}

				&_label {
					text-align: right;
					width: 100px;
					margin-right: 10px;

					&::after {
						content: ":";
					}
				}

				&_content {
					background: var(--bg);
					padding: 8px 10px;
					width: calc(100% - 100px);
					border-radius: 5px;
				}
			}
		}
	}
</style>